<template>
  <div class="siteCodeLargeScreen">
    <!-- // 头部内容 -->
    <div class="siteCodeHeader">
      <siteCodeHeader />
    </div>
    <!-- // 数字内容 -->
    <div class="siteCodeLargeContent">
      <cumulativeNumber />
    </div>
    <!-- // 中间内容 -->
    <div class="siteCodeLargeMain">
      <div class="siteCodeLargeMainleft">
        <div class="siteCodeLargeMainleftTop">
          <!-- 实时扫码数据 -->
          <siteCodeLargeMainleftTop />
        </div>
        <div class="siteCodeLargeMainleftBttom">
          <!-- 时段扫码统计 -->
          <siteCodeLargeMainleftBttom />
        </div>
      </div>
      <div class="siteCodeLargeMainCenter">
        <!-- 地图展示 -->
        <div class="statisticsMap">
          <statisticsMap/>
        </div>
        <div class="siteCodeLargeMainCenterBttom">
          <!-- 实时扫码场所分析 -->
          <siteCodeLargeMainCenterBttom />
        </div>
      </div>
      <div class="siteCodeLargeMainRight">
        <div class="siteCodeLargeMainRightTop">
          <!-- 实时扫码异常数据 -->
          <siteCodeLargeMainRightTop />
        </div>
        <div class="siteCodeLargeMainRightBttom">
          <!-- 扫码异常趋势 -->
          <siteCodeLargeMainRightBttom />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import siteCodeHeader from './home/siteCodeHeader'
  import cumulativeNumber from './home/cumulativeNumber'
  import siteCodeLargeMainleftTop from './home/siteCodeLargeMainleftTop'
  import siteCodeLargeMainleftBttom from './home/siteCodeLargeMainleftBttom'
  import siteCodeLargeMainCenterBttom from './home/siteCodeLargeMainCenterBttom'
  import siteCodeLargeMainRightTop from './home/siteCodeLargeMainRightTop'
  import siteCodeLargeMainRightBttom from './home/siteCodeLargeMainRightBttom'
  import statisticsMap from './home/statisticsMap'
  export default {
    data() {
      return {

      };
    },
    components: {
      siteCodeHeader,
      cumulativeNumber,
      siteCodeLargeMainleftTop,
      siteCodeLargeMainleftBttom,
      siteCodeLargeMainCenterBttom,
      siteCodeLargeMainRightTop,
      siteCodeLargeMainRightBttom,
      statisticsMap
    },
    mounted() {
      this.getEchartBarData();//bar图
    },
    methods: {
      getEchartBarData() {
        const chartBar = this.$refs.chartBar;
        if (chartBar) {
          const myBarChart = this.$echarts.init(chartBar);
          const option = {
            color: ['#3398DB'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              top: '10px',
              left: '0%',
              right: '0%',
              bottom: '4%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                  alignWithLabel: true
                },
                axisLabel: {
                  color: "rgba(255,255,255,.6)",
                  fontSize: '12'
                },
                axisLine: {
                  show: false
                }
              }
            ],
            yAxis: [
              {
                min: 0,
                max: 100,
                type: 'value',
                axisLabel: {
                  color: "rgba(255,255,255,.6)",
                  fontSize: '12'
                },
                axisLine: {
                  lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                  }
                },
                splitLine: {
                  lineStyle: {
                    color: 'rgba(255,255,255,.5)'
                  }
                }
              }
            ],
            series: [
              {
                name: '直接访问',
                type: 'bar',
                barWidth: '35%',
                data: [10, 20, 30, 45, 60, 80, 100],
                itemStyle: {
                  barBorderRadius: 2
                }
              }
            ]
          };
          myBarChart.setOption(option);
          // 随窗口自适应
          window.addEventListener("resize", function () {
            myBarChart.resize();
          });
        }
      },
    }
  };
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .siteCodeLargeScreen {
    width: 1920px;
    height: 1080px;
    /* background: url('../assets/bg.png') no-repeat; 
    background-size: 100% 100%; */
    background-color: yellowgreen;
  }

  .siteCodeLargeContent {
    height: 93px;
    line-height: 93px;
    /* background-color: rgb(221, 204, 162); */
  }

  /* <!-- // 头部内容 -->///////////////////////////////////////////// */
  .siteCodeHeader {
    height: 64px;
    background: url('../assets/TOP.png') no-repeat top center;
    background-size: 100% 100%;
    position: relative;
  }

  /* 中间内容 ////////////////////////////////////////////////*/
  .siteCodeLargeMain {
    display: flex;
    padding: 0 29px 24px 29px;
    /* background-color: yellow; */
  }

  /* 中间内容 左侧内容 //////////////////////////////////////*/
  .siteCodeLargeMainleft {
    width: 455px;
  }

  .siteCodeLargeMainleft .siteCodeLargeMainleftTop {
    width: 455px;
    height: 442px;
    background-color: pink;
    margin-bottom: 16px;
  }

  .siteCodeLargeMainleft .siteCodeLargeMainleftBttom {
    width: 452px;
    height: 441px;
    background-color: pink;
  }

  /* 中间内容 中间侧内容 //////////////////////////////////////*/
  .siteCodeLargeMainCenter {
    flex: 1;
    margin: 0 18px;
  }
  .siteCodeLargeMainCenter .statisticsMap {
    height: 575px;
    background-color: pink;
  }
  .siteCodeLargeMainCenter .siteCodeLargeMainCenterBttom {
    height: 324px;
    background-color: pink;
  }

  /* 中间内容 右间侧内容 //////////////////////////////////////*/
  .siteCodeLargeMainRight {
    width: 454px;
  }

  .siteCodeLargeMainRight .siteCodeLargeMainRightTop {
    width: 454px;
    height: 441px;
    background-color: pink;
    margin-bottom: 18px;
  }

  .siteCodeLargeMainRight .siteCodeLargeMainRightBttom {
    width: 454px;
    height: 441px;
    background-color: pink;
  }
</style>